<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>好友个人主页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/css/see/reset.min.css">
    <link rel="stylesheet" href="/plugins/swiper/swiper4.2.min.css">
    <link rel="stylesheet" href="/css/see/userHomepage.min.css?v=<%=$version%>">
</head>
<body>
<div id="userHomepage" v-cloak>
    <div class="">
        <div class="homepage-top" :class="{'homepage-topFixed':isNav==2}">
            <strong class="homepage-topBg" :style="bgimg(userInfo.headImg)"></strong>
            <span class="goback" @click="getBack()"></span>
            <strong class="homepage-topName">{{userInfo.name}}</strong>
            <!--<span class="more"></span>-->
        </div>
        <header class="homepage-header">
            <div class="homepage-filter" :style="bgimg(userInfo.headImg)"></div>
            <div class="homepage-filter1"></div>
            <div class="homepage-headerCent">
                <div class="homepage-head" :style="bgimg(userInfo.headImg)">
                    <span class="homepage-headGrade"><span>LV.</span>{{userInfo.level}}</span>
                </div>
                <h4>{{userInfo.name}}<span :class="[userInfo.sex==1?'userPage-boy':'userPage-girl']"></span></h4>
                <span>{{userInfo.introduction}}</span>
                <p>{{userInfo.loginAddress}}<span>&bull;</span>{{userInfo.loginTime}}<span>&bull;</span>{{userInfo.fans}}个粉丝</p>
            </div>
        </header>
        <nav class="homepage-navTab clearfix" :class="{'homepage-navFixed':isNav==2}">
            <strong :class="{active:indexs==1}" @click="getNavtab(1)">资料</strong>
            <strong :class="{active:indexs==2}" @click="getNavtab(2)">视频<span>{{mediasList.totalRow}}</span></strong>
            <strong :class="{active:indexs==3}" @click="getNavtab(3)">商品<span>{{productsList.totalRow}}</span></strong>
        </nav>
    </div>
    <div class="homepage-tabCent">
        <template v-if="indexs==1">
            <div class="homepage-album" v-if="userInfo&&userInfo.albums&&userInfo.albums.lenght>0">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" v-for="item in userInfo.albums">
                           <img :src="item.imgSrc" class="swiper-lazy">
                        </div>
                        <!--<div class="swiper-slide">-->
                            <!--<img data-src="/imgs/happyi/index/bpic1.png" class="swiper-lazy">-->
                        <!--</div>-->
                    </div>
                </div>
            </div>
            <div class="homepage-dynamics">
                <div class="dynamics-Title">动态<span>{{userInfo.dynamicCounts}}</span></div>
                <div class="dynamics-cent clearfix">
                    <span :style="bgimg(item.coverImgSrc)" v-for="item in userInfo.dynamics"></span>
                    <!--<span></span>-->
                    <strong class="dynamics-centMore"></strong>
                </div>
            </div>
            <div class="homepage-info">
                <div class="dynamics-Title">信息</div>
                <div class="homepage-infoCent">
                    <p v-for="item in userInfo.infos">{{item.id}}:{{item.name}}</p>
                    <!--<p>家乡:154654</p>-->
                    <!--<p>星座:154654</p>-->
                    <!--<p>职业:154654</p>-->
                    <!--<p>注册日期:154654</p>-->
                    <!--<p>关系:154654</p>-->
                </div>
            </div>
            <div class="homepage-label">
                <div class="dynamics-Title">标签<span></span></div>
                <div class="homepage-labelCent clearfix">
                    <label v-for="item in userInfo.labels">{{item.name}}</label>
                    <!--<label>徒步看剧</label>-->
                </div>
            </div>
            <div class="homepage-myfollow">
                <div class="dynamics-Title">关注的人<span>{{userInfo.followCounts}}</span></div>
                <div class="myfollow-cent clearfix">
                    <a v-for="item in userInfo.follows" @click="getNext(1,item)">
                        <span :style="bgimg(item.headImg)"></span>
                        <p>{{item.name}}</p>
                    </a>
                    <!--<a href="">-->
                        <!--<span></span>-->
                        <!--<p>找找同学同学</p>-->
                    <!--</a>-->
                    <strong class="dynamics-centMore" @click="getNext(5)"></strong>
                </div>
            </div>
       <!--     <div class="homepage-joinCircle">
                <div class="dynamics-Title">加入的圈子<span>{{userInfo.circleCounts}}</span></div>
                <div class="joinCircle-cent">
                    <div class="joinCircle-centlist" v-for="item in userInfo.circles" @click="getNext(3,item)">
                        <span :style="bgimg(item.coverImgSrc)"></span>
                        <h6>{{item.circleName}}</h6>
                        <p>{{item.categoryName}}<span>&bull;</span>{{item.circleCount}}人</p>
                        <strong class="dynamics-centMore"></strong>
                    </div>
                </div>
            </div>-->
        </template>
        <template v-if="indexs==2">
            <div class="homepage-videotop">
                共上传<span>{{mediasList.totalRow}}</span>个视频
                <strong class="videotop-up">时间最新</strong>
            </div>
               <!--<selfmedia-flow :list="mediasList2" :number="1"></selfmedia-flow>-->
            <div class="homepage-video">
                <div class="homepage-videoList" v-for="item in mediasList2" @click="getNext(4,item)">
                    <div class="videoList-data">{{item.createDate}}</div>
                    <div class="videoList-cent">
                        <div class="videoList-centImg" :style="bgimg(item.coverImgSrc)">
                            <span>{{item.vedioLength}}</span>
                        </div>
                        <h6>{{item.title}}</h6>
                        <p>{{item.categoryName}}<span>&bull;</span>{{item.playCount}}万次播放</p>
                    </div>
                </div>
            </div>
        </template>
        <template v-if="indexs==3">
            <!--<div class="homepage-videotop">-->
                <!--共上传<span>{{productsList.totalRow}}</span>款商品-->
                <!--<strong class="videotop-up">全部商品</strong>-->
            <!--</div>-->
            <div class="homepage-goods clearfix">
                <div class="homepage-goodsList" v-for="item in productsList2" @click="getNext(6,item)">
                    <strong class="goodsList-img" :style="bgimg(item.imgSrc)"></strong>
                    <strong class="goodsList-imgBg" v-if="item.num<1"></strong>
                    <p>{{item.title}}</p>
                    <span>&yen;{{item.price}}</span>
                </div>
                <!--<div class="homepage-goodsList">-->
                    <!--<strong class="goodsList-img"></strong>-->
                    <!--<strong class="goodsList-imgBg"></strong>-->
                    <!--<p>第四季度是龙卷风是</p>-->
                    <!--<span>11644</span>-->
                <!--</div>-->
            </div>
        </template>
        <div class="loadtip" v-if="loadFlag"></div>
        <footer class="homepage-footer clearfix" v-if="userInfo.friendId"  @click="getNext(2)">
            <a><span class="userPage-zltalk"></span>聊天</a>
            <!--<a @click="getAddFriend()"><span class="userPage-zlnfire"></span>关注</a>-->
        </footer>
        <footer class="homepage-footer clearfix" v-else  @click="getAddFriend()">
            <!--<a><span class="userPage-zltalk" @click="getNext(2)"></span>聊天</a>-->
            <a><span class="userPage-zlnfire"></span>关注</a>
        </footer>
    </div>
    <prompt-view ref="prompt"></prompt-view>
</div>
<script src='/plugins/js/jquery-1.11.3.min.js'></script>
<script type="text/javascript" src="/plugins/js/jquery.lazyload.min.js"></script>
<!--<script type="text/javascript" src="/plugins/js/minigrid.js"></script>-->
<script type="text/javascript" src="/plugins/js/vue.min.js"></script>
<script type="text/javascript" src="/plugins/swiper/swiper.min.4.2.js"></script>
<script type="text/javascript" src="/js/see/userHomepage.js?v=<%=$version%>"></script>
<script>
    var swiper1 = new Swiper(".homepage-album .swiper-container",{
        spaceBetween: 5,
        slidesPerView: 'auto',
        freeMode: true,
        lazy: {
            loadPrevNext: true,
            loadPrevNextAmount: 3,
            loadOnTransitionStart: true
        },
        observer: true,//修改swiper自己或子元素时，自动初始化swiper
        observeParents: true//修改swiper的父元素时，自动初始化swiper
    });
    $("img.lazy").lazyload();
</script>
</body>
</html>